<template>
  <div class="form-preview-group">
    <div
      class="portal-tabbar-view-box"
      :style="{ color: index === item.order ? color : '#000' }"
      v-for="item in list"
      :key="item.title"
    >
      <i class="iconfont" :class="item.icon"></i>
      <span>{{ transformI18n(`portal.${item.value}`, formPreviewLocale) }}</span>
      <!-- <span>{{ $t(`portal.${item.value}`) }}</span> -->
    </div>
  </div>
</template>

<script>
/* props */
import { previewProps } from '@src/mform/components/props';
import { findComponentUpward } from '@src/util/assist';
import { transformI18n } from '@src/locales/index.ts';
import { useLocaleInject } from '@hooks/useLocale'
/* mixin */
import { VersionControlLinkCMixin } from '@src/mixins/versionControlMixin';

export default {
  name: 'mform-tabbar-preview',
  mixins: [VersionControlLinkCMixin],
  props: previewProps,
  data() {
    return {
      // key: value
    };
  },
  methods: {
    transformI18n
  },
  setup(){
    const { locale: formPreviewLocale } = useLocaleInject('formPreviewLocale');

    return {
      formPreviewLocale,
    };
  },
  computed: {
    formDesignComponent() {
      return findComponentUpward(this, 'mform-design');
    },
    color() {
      return this.formDesignComponent.themeColour.split(',')[0] || '';
    },
    index() {
      return this.formDesignComponent.index || 1;
    },
    list() {
      const arr = this.field.setting?.list.filter(item => item.isVisible) || []
      
      return arr.filter(item => {
        
        if (item.value == 'market') {
          return this._isShowLinkCShop
        }
        
        return true
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.form-preview-group {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;

  .portal-tabbar-view-box {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #000;
  }
}
</style>
